import * as React from 'react';
import { Form, Button, Input, Row, Col } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { IPageDataQuery } from '@/types';
import { IProjectQueryParams } from '@/api';

const FormItem = Form.Item;

interface Props extends FormComponentProps {
    onAdd: () => {}
    onSearch: (data: IPageDataQuery<IProjectQueryParams>) => void
}

function Search(props: Props) {
    const { getFieldDecorator, getFieldsValue } = props.form;
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };
    return (
        <Form {...formItemLayout}>
            <Row>
                <Col span={8}>
                    <FormItem label='项目名称'>
                        {
                            getFieldDecorator('projectName')(
                                <Input placeholder='请输入' allowClear />
                            )
                        }
                    </FormItem>
                </Col>
                <Col span={7} offset={1}>
                    <FormItem>
                        <Button type='primary' onClick={() => {
                            const data: IProjectQueryParams = getFieldsValue();
                            props.onSearch({ data, page: 1, pageSize: 20 })
                        }}>查询</Button>
                        <Button type='primary' onClick={props.onAdd}>添加项目</Button>
                    </FormItem>
                </Col>
            </Row>


        </Form>
    )
}

export default Form.create<Props>()(Search)
